<template>
	<div>
		<select1></select1>
		<ul class="hLeft">
			<li v-for="(item,index) in items">
				<router-link to='/Rcontent'>{{item}}</router-link>
			</li>
			<li v-for="(item,index) in items2">
				<router-link to='/Rcontent2'>{{item}}</router-link>
			</li>

		</ul>
		<router-view name="second"></router-view>
	</div>
</template>

<script>
	import select1 from './select1.vue'
	export default {
		name: "Llist",
		components: {
			select1
		},
		data() {
			return {
				items: ["热门分类", "手机数码", "电脑办公", "电视影音", "空调冰洗"],
				items2: ["食品酒水", "厨房卫浴", "生活电器", "美妆个护", "母婴玩具", "医疗保健", "服饰鞋帽", "运动户外", "箱包奢品", "钟表首饰", "住宅家具", "家装建材", "家居日用", "床品家纺", "汽车用品", "黄金收藏", "智能家居", "金融理财", "生活服务"]

			}

		}

	}
	$(function() {
		$(".hLeft li").eq(0).addClass("add");
		$(".hLeft li").eq(0).css("background", "white");
		$(".hLeft li").click(function() {
			$(this).siblings().removeClass("add");
			$(this).addClass("add");
			$(this).css("background", "white");
			$(this).siblings().css("background", "rgba(204,204,204,0.3)");
		})
	})
</script>

<style scoped>
	/*左侧栏*/
	
	.hLeft {
		width: 20%;
		display: inline-block;
		position: absolute;
		left: 0;
		top: 38px;
		padding-right: 1rem;
		border-top: 1px solid #ccc;
	}
	
	.hLeft li {
		width: 100%;
		padding: 1rem 0.5rem;
		font-size: 1.2rem;
		background: rgba(204, 204, 204, 0.3);
		text-align: center;
	}
	
	.hLeft li a {
		text-decoration: none;
		color: black;
		border-bottom: 1px solid grey;
		padding-bottom: 15%;
	}
	
	.hmore {
		font-size: 2rem;
	}
	
	.add {
		border-left: 3px solid deeppink;
	}
</style>